//需求：当鼠标点击登录时，显示登录框

//获取元素
let loginbtn = document.querySelector('#loginbtn')//登录按钮

let hidebtn = document.querySelector('#hidebtn')//隐藏按钮

let mantle = document.querySelector('#mantle') //蒙层

let delbtn = document.querySelector('#delbtn') //隐藏显示图标

let user = document.querySelector('#user')  //用户名

let arr = document.querySelector('#arr')  //密码框
let news = document.querySelector('#news')  //隐藏显示图标

let btn = document.querySelector('#btn')  //登录

//遍历 
//点击登录按钮显示mantle
loginbtn.addEventListener('click', function () {
    console.log(111);
    mantle.style.display = 'block'
})


hidebtn.addEventListener('click', function () {
    // console.log(11);
    mantle.style.display = 'none'
})

//需求：判断输入用户名是否大于0，是：显示delbtn  否：隐藏delbtn
/* 事件类型：input ：输入字符时触发事件
             keyup：按键松开时触发 */

user.addEventListener('input', function () {
    console.log(111);
    if (user.value.length > 0) {
        delbtn.style.display = 'block' //显示
    } else {
        delbtn.style.display = 'none' //隐藏
        console.log(delbtn);
    }
})
//需求：点击 delbtn 清空用户名 隐藏自己

delbtn.addEventListener('click', function () {
    user.value = ''
    delbtn.style.display = 'none'
})


/* 需求：判断输入密码是否大于0，是：显示news 否：隐藏news
事件类型：input ：输入触发事件
        keyup：按键松开触发 */
arr.addEventListener('input', function () {
    if (arr.value.length > 0) {
        news.style.display = 'block'//显示

    } else {
        news.style.display = 'none'//隐藏
        console.log(news);
    }
})



/* 需求：点击news 改变它的图标眼镜 arr的text转换为password
思想：奇数偶数次的点击
 */
let count = 0 //点击次数

news.addEventListener('click', function () {
    //次数加1
    ++count
    //判断奇数次点击，还是偶数次点击
    if (count % 2 === 0) {
        
        //偶数
        arr.type = 'password'
        news.src = '../images/close.png'
    } else {
        //奇数
        arr.type = 'text'
        news.src = '../images/open.png'
    }

})





//添加属性
let flag={
    user:false,
    pwd:false
}


/* 需求：用户名失去焦点时，验证输入的用户名是否合法 (6-12位 字母开头 数字 下划线)
 */

user.addEventListener('blur', function () {
    /* console.log(user.value); */
    //定义验证规则
    let uReg = /^[a-zA-Z]\w{5,11}$/ //正则表达式;

    let error = uReg.test(user.value) //结果为block值

    //判断
    if (error) {

        erruser.textContent = '' //正确
        flag.user=true
    } else {
        erruser.textContent = '输入用户名错误' //错误
        flag.user=false
    }
})


//需求：密码失去焦点时，验证输入密码是否合法（6-12 字母开头 数字 下划线）
arr.addEventListener('blur', function () {
    /* console.log(arr.value); */
    //定义验证规则
    let uReg = /^[a-zA-Z]\w{5,11}$/

    let num = uReg.test(arr.value)

    //判断
    if (num) {
        errarr.textContent = ''
        flag.pwd = true
    } else {
        errarr.textContent = '输入密码错误'
        flag.pwd = false
    }



})
//需求：点击登录按钮，验证用户名和密码是否合法 

btn.addEventListener('click',function(){
if(flag.user === false){
    erruser.textContent = '输入用户名错误'
}else if(flag.pwd === false){
    errarr.textContent = '输入密码错误'
}else{
    location.href='./success.html'
}

})
